

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=dark>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/newtubiao.png">
  <link rel="icon" href="/img/newtubiao.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="Asteri5m">
  <meta name="keywords" content="">
  <meta name="description" content="本期知识点 Socket通信原理 通信安全、网络安全 制定通信协议 登录、注册时的协议 游戏进程中的通信协议   通信内容的封装与解析 连接状态的检测与服务器保护机制  0x03 网络编程，Socket从底层出发在记录完基本基础开发过程之后，现在开始记录本次项目的核心内容：SOCKET。它在百度百科上是这样解释的： 所谓套接字(Socket)，就是对网络中不同主机上的应用进程之间进行双向通信的端点">
<meta property="og:type" content="article">
<meta property="og:title" content="记一次网络(局域网)程序项目开发(二)">
<meta property="og:url" content="http://asteri5m.icu/archives/%E8%AE%B0%E4%B8%80%E6%AC%A1%E7%BD%91%E7%BB%9C(%E5%B1%80%E5%9F%9F%E7%BD%91)%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%912.html">
<meta property="og:site_name" content="Asteri5m">
<meta property="og:description" content="本期知识点 Socket通信原理 通信安全、网络安全 制定通信协议 登录、注册时的协议 游戏进程中的通信协议   通信内容的封装与解析 连接状态的检测与服务器保护机制  0x03 网络编程，Socket从底层出发在记录完基本基础开发过程之后，现在开始记录本次项目的核心内容：SOCKET。它在百度百科上是这样解释的： 所谓套接字(Socket)，就是对网络中不同主机上的应用进程之间进行双向通信的端点">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/Asteri5m/wd_img/raw/master/img/image-20211029184625614.png">
<meta property="og:image" content="https://gitee.com/Asteri5m/wd_img/raw/master/img/image-20211102002956154.png">
<meta property="article:published_time" content="2021-11-01T14:58:23.753Z">
<meta property="article:modified_time" content="2021-11-22T14:55:34.529Z">
<meta property="article:author" content="Asteri5m">
<meta property="article:tag" content="Win32">
<meta property="article:tag" content="EasyX">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://gitee.com/Asteri5m/wd_img/raw/master/img/image-20211029184625614.png">
  
    <meta name="baidu-site-verification" content="code-GBSY8p4qe6" />
  
  <title>记一次网络(局域网)程序项目开发(二) - Asteri5m</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/atom-one-dark.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<link rel="stylesheet" href="/xm_custom/custom.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"asteri5m.icu","root":"/","version":"1.8.12","typing":{"enable":true,"typeSpeed":120,"cursorChar":"_","loop":true},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":3},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"5INqyf5xMrWdsn0whn39qjsu-gzGzoHsz","app_key":"6UTAOxyJnjvDwHX3PJagKMg9","server_url":"https://5inqyf5x.lc-cn-n1-shared.com","path":"window.location.pathname"}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Asteri5m</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/guestbook/">
                <i class="iconfont icon-note"></i>
                留言板
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" false
         style="background: url('/img/none.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="记一次网络(局域网)程序项目开发(二)">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-11-01 22:58" pubdate>
        2021年11月1日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      8.9k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      28 分钟
    </span>
  

  
  
    
      <!-- LeanCloud 统计文章PV -->
      <span id="leancloud-page-views-container" class="post-meta" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="leancloud-page-views"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">记一次网络(局域网)程序项目开发(二)</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：3 个月前
                
              </p>
            
            <div class="markdown-body">
              <h2 id="本期知识点"><a href="#本期知识点" class="headerlink" title="本期知识点"></a>本期知识点</h2><ul>
<li>Socket通信原理</li>
<li>通信安全、网络安全</li>
<li>制定通信协议<ul>
<li>登录、注册时的协议</li>
<li>游戏进程中的通信协议</li>
</ul>
</li>
<li>通信内容的封装与解析</li>
<li>连接状态的检测与服务器保护机制</li>
</ul>
<h2 id="0x03-网络编程，Socket从底层出发"><a href="#0x03-网络编程，Socket从底层出发" class="headerlink" title="0x03 网络编程，Socket从底层出发"></a>0x03 网络编程，Socket从底层出发</h2><p>在记录完基本基础开发过程之后，现在开始记录本次项目的核心内容：SOCKET。它在百度百科上是这样解释的：</p>
<p>所谓套接字(Socket)，就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端，提供了应用层进程利用网络协议交换数据的机制。从所处的地位来讲，套接字上联应用进程，下联网络协议栈，是应用程序通过网络协议进行通信的接口，是应用程序与网络协议根进行交互的接口</p>
<h3 id="Socket通信原理"><a href="#Socket通信原理" class="headerlink" title="Socket通信原理"></a>Socket通信原理</h3><p>套接字是通信的基础，例如，它是TCP&#x2F;IP协议的基本操作单位。分为**流套接字(SOCK_STREAM)<strong>、</strong>数据报套接字(SOCK_DGRAM)<strong>、</strong>原始套接字(SOCK_RAW)**三类。而前两种基本都用于已经制定好的协议TCP和UDP通信中，而我这里制作的小程序，显然用原始套接字更为简单，同时也是课程的要求。</p>
<p>在套接字通信中，有两个重要组成部分，客户端（Client Socket）和服务器端（Server Socket）。基本连接流程如下</p>
<pre><code class=" mermaid">graph LR
A[Server&lt;br&gt;&gt;打开监听]--&gt;B[Client&lt;br&gt;&gt;通信请求]
B--&gt;C[连接确认]
</code></pre>

<p><strong>Socket表示方法</strong>：用点分十进制的IP地址加上端口号组成，中间用冒号，逗号，空格之类的符号隔开。例如：127.0.0.1  3366则是表示本地ip，端口号为3366，端口号随机设置就行，如果你不想和别人起冲突，那就不要设置最常见的就行 。</p>
<p>建立连接之后，就可以进行收发消息了，无论是客户端，还是服务器端，收发消息的函数是统一的：<code>recv</code>和<code>send</code></p>
<figure class="highlight c++"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs c++"><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">recv</span><span class="hljs-params">(SOCKET s, 		<span class="hljs-comment">//指定接收端套接字描述符</span></span></span><br><span class="hljs-params"><span class="hljs-function">         <span class="hljs-keyword">char</span> FAR*buf, 	<span class="hljs-comment">//指明一个缓冲区，存放recv函数接收到的数据</span></span></span><br><span class="hljs-params"><span class="hljs-function">         <span class="hljs-keyword">int</span> len, 		<span class="hljs-comment">//指明buf的长度</span></span></span><br><span class="hljs-params"><span class="hljs-function">         <span class="hljs-keyword">int</span> flags)</span></span>;    <span class="hljs-comment">//一般置0</span><br><br><span class="hljs-function"><span class="hljs-keyword">int</span> PASCAL FAR <span class="hljs-title">send</span><span class="hljs-params">( SOCKET s, <span class="hljs-comment">//一个用于标识已连接套接口的描述字。</span></span></span><br><span class="hljs-params"><span class="hljs-function">                    <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> FAR* buf, <span class="hljs-comment">//包含待发送数据的缓冲区。</span></span></span><br><span class="hljs-params"><span class="hljs-function">                    <span class="hljs-keyword">int</span> len, <span class="hljs-comment">//缓冲区中数据的长度。</span></span></span><br><span class="hljs-params"><span class="hljs-function">                    <span class="hljs-keyword">int</span> flags)</span></span>;<span class="hljs-comment">//调用执行方式。</span><br></code></pre></div></td></tr></table></figure>

<p>套接字字描述符(SOCKET s)，可在使用<code>connect</code>建立连接时指定SOCKET变量地址，连接成功后，即可获得描述符。</p>
<p>需要注意的是：<code>recv</code>函数是<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E9%98%BB%E5%A1%9E%E5%87%BD%E6%95%B0/2286154?fr=aladdin">阻塞函数</a>，具体会在下文中的 <font color=#FF88FF><em>连接状态的检测与服务器保护机制</em></font>  中提到。</p>
<h3 id="通信安全、网络安全"><a href="#通信安全、网络安全" class="headerlink" title="通信安全、网络安全"></a>通信安全、网络安全</h3><p>原始套接字编程，在收发消息的时候，都是明文传输，在网络传输层，这是很危险的事情，只需要将网络传输拦截，即可查看到这些数据，而且是明文传输，那么直接就会被窃取到有用的信息。</p>
<p><img src="https://gitee.com/Asteri5m/wd_img/raw/master/img/image-20211029184625614.png" srcset="/img/loading.gif" lazyload></p>
<p>相对于数据被窃取，更为严重的，则是数据被篡改，攻击者可以通过构造特殊攻击字符串到程序中，借此来攻击我们的数据库等等，安全问题不得不防。因为我们是游戏，所以还得保证游戏的公平性，避免不必要的bug。</p>
<p>而应对传输安全的问题，可以通过制定特殊的通信协议来完成，例如加入密码学原理，加密传输，再或者进行多端口同步分组传输等等。</p>
<p><em>事实上，在我们的项目中，还没有任何的保护措施，因为我觉得没有必要，我并不想在一次期末设计上花费太多精力，这个项目的代码前后就花了近十天的时间，能省点事就省点事吧，要是不过再来加上。</em></p>
<h3 id="制定通信协议"><a href="#制定通信协议" class="headerlink" title="制定通信协议"></a>制定通信协议</h3><p>没有专门针对网络安全问题，只是为了维持系统稳定的最低要求而制作的建议通信协议。所以该协议也不适用于其他地方，甚至你可能觉得它连协议都算不上，就是系统进程进行同步所需要发送的必要消息，完全没有额外的内容，没有效验，没有打包拆包等等。</p>
<h4 id="登录、注册时的协议"><a href="#登录、注册时的协议" class="headerlink" title="登录、注册时的协议"></a>登录、注册时的协议</h4><p>程序登录，第一步要干嘛？传输账号？还是发送“我要登录”的信息？都不是。而是先连接服务器，在成功连接服务器的情况下，才能进行程序的基本操作，登录or注册。</p>
<pre><code class=" mermaid">sequenceDiagram
title: 登录协议流程
participant Client
participant Sever
participant Mysql
note over Mysql:打开服务
note over Sever:打开监听(默认端口号)
Client-&gt;&gt;Sever:发送连接请求
Sever--&gt;&gt;Client:连接成功
Client-&gt;&gt;Sever:登录请求
Sever-&gt;&gt;Mysql:连接数据库,查询测试信息
Mysql--&gt;&gt;Sever:连接成功
note over Sever:准备完毕,发送允许登录
Sever--&gt;&gt;Client:允许登录,请发先账号
Client-&gt;&gt;Sever:账号
Mysql--&gt;&gt;Sever:获取用户表表
note over Sever:在用户表中查找账号
Sever--&gt;&gt;Client:找到了,请发密码/未找到,无账号
note left of Client:有账号,发送密码&lt;br&gt;/无账号:登录失败
Client-&gt;&gt;Sever:密码
note over Sever:查找到账号对应的密码&lt;br&gt;比对两个密码
Sever--&gt;&gt;Client:登录成功/密码错误
Sever-&gt;&gt;Mysql:关闭连接
note left of Client:登录成功,进入游戏&lt;br&gt;/密码错误,重新登录
</code></pre>

<p>注册操作的协议流程和登录大相径庭,只是有个别地方不同</p>
<pre><code class=" mermaid">sequenceDiagram
title: 注册协议流程
participant Client
participant Sever
participant Mysql
note over Mysql:打开服务
note over Sever:打开监听(默认端口号)
Client-&gt;&gt;Sever:发送连接请求
Sever--&gt;&gt;Client:连接成功
Client-&gt;&gt;Sever:发送注册请求
Sever-&gt;&gt;Mysql:连接数据库,查询测试信息
Mysql--&gt;&gt;Sever:连接成功
note over Sever:准备完毕,发送允许注册
Sever--&gt;&gt;Client:允许注册,请发先账号
Client-&gt;&gt;Sever:账号
Mysql--&gt;&gt;Sever:获取用户表表
note over Sever:在用户表中查找账号
Sever--&gt;&gt;Client:无重复,请发密码/用户名重复
note left of Client:无重复,发送密码&lt;br&gt;/用户名重复,注册失败
Client-&gt;&gt;Sever:密码
Sever-&gt;&gt;Mysql:添加账号和密码信息到表中
Mysql--&gt;&gt;Sever:添加成功/失败
Sever--&gt;&gt;Client:注册成功/密码错误,服务器问题
Sever-&gt;&gt;Mysql:关闭连接
note left of Client:注册成功,返回登录&lt;br&gt;/注册失败,重新注册
</code></pre>

<h4 id="游戏进程中的通信协议"><a href="#游戏进程中的通信协议" class="headerlink" title="游戏进程中的通信协议"></a>游戏进程中的通信协议</h4><p>登录成功之后就是游戏的主程序了，主程序的通信协议尤为重要，以为要涉及到一个东西那就是，进程同步。简言之就是服务器端要和客户端同步，服务器要知道客户端在哪一个进程（或者你理解成游戏界面）了，此时对应的客户端的操作是什么，服务器要怎么回复客户端。</p>
<h5 id="主界面"><a href="#主界面" class="headerlink" title="主界面"></a>主界面</h5><p><img src="https://gitee.com/Asteri5m/wd_img/raw/master/img/image-20211102002956154.png" srcset="/img/loading.gif" lazyload></p>
<p>在上面的流程图中，只有三个选项涉及到与服务器的通信，真正通信的，只有两个：开始游戏（创建房间）和加入游戏（加入房间）。当程序关闭时，服务器端会自动检测到程序关闭（其实是通信线程关闭）并关闭与之对应的线程。</p>
<h5 id="游戏界面"><a href="#游戏界面" class="headerlink" title="游戏界面"></a>游戏界面</h5><p>在游戏界面，玩家可以一直和对手PK，或者玩累了选择退出，对于另一个玩家，则是可以检测到对方已退出的，但是因为<code>recv</code>是阻塞函数，这里的游戏体验可能略显卡顿，例如：</p>
<ul>
<li>当你选择了出拳了之后就不能再选择退出了，只能等待对手出拳或者关闭程序，这对先出拳的玩家而言，如果对方不退出，也不退出，那么选择出拳，那么简直就是浪费该玩家的时间。可以通过增加出拳倒计时来解决（暂未解决）。</li>
<li>如果先出拳的玩家（这里称之为玩家1）选择了退出，那么对于玩家2而言，他不是马上就能看到“对方已退出”这条消息的，而是要在自己出拳之后才能看到。但是我觉这点影响不大，暂时不打算解决。</li>
<li>在玩家选择了创建房间之后，就会进入等待加入的界面，有人加入就会进入游戏，没人加入就一直等待。但是如果一直没人加入，就会卡在这里，这是比较严重的bug，所以我马上就修复了。<em>我在该界面增加了一个返回选项</em>。</li>
</ul>
<p>事实上，这个返回选项并不是那么好加的</p>
<ol>
<li>方法一：本来我是打算直接添加一个返回按钮的，但是由于我在该界面设置了另一个阻塞函数<code>Sleep</code>，因为等待界面是用代码实时绘制出来的，每隔一秒左右就变换一次颜色（重绘一遍）。所以此时还要实现完整的鼠标点击功能，程序是肯定不能阻塞的，至少在这个线程里是这样，所以又得开多线程专门用于绘图，然后作为客户端，还要等待服务器端发送有人加入房间的信息，但是如果一直等待接收消息，程序又是阻塞状态。所以又得开一个线程？那么问题又来了，怎么发送消息呢？接收消息的线程此时是阻塞态，不能用，所以只能在主线程，或者再创建一个专门发送消息的线程。   OK截止到这里没有什么问题，客户端只是多了两个线程而已，有没有工作压力，但是对于服务器，也得创建与之对应的接收和发送消息的线程，对于单个用户登录，问题不大，但是对于多个用户呢？服务器端的任务量显然加重了。   另一方面，这样设计下来逻辑也很复杂：首先是一个主线程，主要是显示绘图（绘图由副线程1完成），等待结果（接收消息由副线程2完成），检测返回键的点击（如果点击就发送返回消息然后关闭相关线程再返回主菜单）。线程管理这事，其实挺麻烦的，必须得设置线程标识，预防锁死等等。</li>
<li>方法二：添加一个返回按键，和方法一的按钮不同，这里是指物理按键，我选择了键盘上的ESC键，使用<code>GetAsyncKeyState</code>函数（该函数非阻塞，会根据按键状态返回不同的值）检测该按键是否按下，按下就等于选择返回。然后是阻塞问题的解决：设置轮询代替之前的一直等待。每隔300ms就给服务器发送一次询问消息，服务器应答有人加入或是没人加入，如果用户按下ESC键则用退出消息代替询问消息，服务器即可进行相关操作。在一个线程里，就完美解决了该问题，因为同样存在阻塞函数（主要是Sleep），在阻塞期间用户按键是无效的，所以我会提示用户“ 长按ESC退出 ”。:smirk:</li>
</ol>
<p>显而易见，方法二更为实用，虽然会一直收发消息，但是这点开销我认为是小于开多线程的。等待加入时，通信协议是这样的：</p>
<pre><code class=" mermaid">sequenceDiagram
title: 创建房间协议流程
participant Client：play1
participant Sever
participant Client：play2
Client：play1-&gt;&gt;Sever:创建房间
note over Sever:查询是否可创建房间
Sever--&gt;&gt;Client：play1:可以创建
note over Client：play1:进入等待状态
Client：play1-&gt;&gt;Sever:第1次询问:是否有人加入&lt;br&gt;/ESC按下,发送退出消息
Sever-&gt;&gt;Client：play1:第1次应答:有/无 人加入
note right of Client：play1:....................
note left of Client：play1:如果按下ESC,&lt;br&gt;则直接退出等待
Client：play1-&gt;&gt;Sever:第n次询问:是否有人加入&lt;br&gt;/ESC按下,发送退出消息
Sever-&gt;&gt;Client：play1:第n次应答:有/无 人加入
note right of Client：play1:....................
Client：play2-&gt;&gt;Sever:加入play1的房间
Sever-&gt;&gt;Client：play1:第n+x次应答:有人加入
note over Client：play1:退出等待状态
</code></pre>

<p>因为轮询的间隔为300ms，所以当有人加入或者按ESC退出，程序反应速度都是很快的，500ms以内的延迟对这个小游戏来说，是完全没有任何影响和对游戏体验的损伤的。</p>
<p>当经历以上重重难关之后，终于来到了游戏对抗的环节，它的协议是这样的：</p>
<pre><code class=" mermaid">sequenceDiagram
title: 游戏对抗协议流程
participant Player1
participant Sever
participant Player2
Player1-&gt;&gt;Sever:选择出拳
note over Player1:进入等待接收阻塞态
note over Sever:Choice_flag++
Player2-&gt;&gt;Sever:选择出拳
note over Player2:进入等待接收阻塞态
note over Sever:Choice_flag++
note over Sever:Choice_flag%2 == 0?
Sever--&gt;&gt;Player1:Player2的选择
Sever--&gt;&gt;Player2:Player1的选择
note over Player1:本地判断结果
note over Player2:本地判断结果
Player2-&gt;&gt;Sever:选择退出
note over Player2:退出游戏界面,返回主界面
note over Sever:Choice_flag++
Player1-&gt;&gt;Sever:选择出拳
note over Player1:进入等待接收阻塞态
note over Sever:Choice_flag++
note over Sever:Choice_flag%2 == 0?
Sever--&gt;&gt;Player1:Player2的选择
Sever--&gt;&gt;Player2:Player1的选择
note over Player1:本地判断结果&lt;br&gt;检测到对方退出&lt;br&gt;退出游戏,回主界面
</code></pre>

<p>这里演示了玩家在第二回合就选择退出的场景，很好理解，在服务器设置有Choice_flag，每接收一个选择就自加，然后当它为2的倍数时，就判断为双方出拳完毕，然后返回另一个玩家的出拳，结果则在本地判断。如果对方选择退出，对方可直接退出，我方则需要等到出拳以后，如果我方挂机，这对对方而言，也是一种保护，保障了玩家的体验。</p>
<h3 id="通信内容的封装与解析"><a href="#通信内容的封装与解析" class="headerlink" title="通信内容的封装与解析"></a>通信内容的封装与解析</h3><p>关于游戏内通信时的内容，按理来说应该是具有封装与解析的，正确的封装应该包含封装头，信息内容，效验数据，封装尾等几大部分。</p>
<p>但是事实上基本都是明文或者特定值传输。甚至就连账号密码，都是明文传输的。唯一设计到封装的，则是房间列表的传输，将所有房间信息封装成一条信息，再由客户端解析出来。</p>
<figure class="highlight c++"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs c++"><span class="hljs-comment">//获取并解析房间列表</span><br><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">GetRoomlist</span><span class="hljs-params">()</span></span><br><span class="hljs-function"></span>&#123;<br>	<span class="hljs-keyword">char</span> _buff[<span class="hljs-number">0x10</span>],Buffer_grl[DEFAULT_BUFFER];<br>	_RecvMessage(Sock_Play, Buffer_grl);<span class="hljs-comment">//接收到房间列表信息</span><br><br>	flag_L = <span class="hljs-number">0</span>;<span class="hljs-comment">//房间数量计数器清零</span><br>	<span class="hljs-comment">/*解析房间列表:BUFFER[i]与BUFFER[i+1]为一组数据，房间号和房间状态*/</span><br>	<span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-built_in">strlen</span>(Buffer_grl) / <span class="hljs-number">2</span>; i++)<br>	&#123;<br>		_itoa_s(Buffer_grl[<span class="hljs-number">2</span> * i], _buff, <span class="hljs-number">10</span>);<span class="hljs-comment">//房间号为int,转为char</span><br>		<span class="hljs-built_in">ChartoTCHAR</span>(_buff, roomlist[<span class="hljs-number">2</span> * i]);<span class="hljs-comment">//char再转为可打印的字符类型(TCHAR)</span><br>		roomlist[<span class="hljs-number">2</span> * i + <span class="hljs-number">1</span>][<span class="hljs-number">0</span>] = Buffer_grl[<span class="hljs-number">2</span> * i + <span class="hljs-number">1</span>];<span class="hljs-comment">//高位为房间状态:已满/可加入</span><br>		flag_L++;<br>	&#125;<br>	<span class="hljs-keyword">return</span>;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>这里就是对房间列表信息的解析过程，也是很简单，两位一组进行封装，低位为房间号，高位为房间状态。所以字符串长度的二分之一就是房间数量。这里我们只设置了8个房间的上限，在我测试的过程中，全开都没有什么问题。</p>
<p>至于其他的消息封装，就没有了，因为进程同步机制，所以不用封装也能很好的实现功能，都具有单独的消息处理函数。</p>
<p>当然，就算是明文，也是得说一下是怎样的明文，一般也就是设置一些特定值，因为0不方便传输，所以很多都是从1开始的，在客户端和服务器端使用同一套宏定义，对于完成代码来说，是很快捷的。例如：</p>
<figure class="highlight c++"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs c++"><span class="hljs-comment">//房间状态</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _close 0</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _open 1</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _over 2</span><br><br><span class="hljs-comment">//加入游戏模式选择</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _create 1</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _enter 2</span><br><br><span class="hljs-comment">/*缓冲区大小*/</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> DEFAULT_BUFFER 4096 </span><br><br><span class="hljs-comment">//登录注册返回结果</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _victory 1</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _fail 2</span><br><span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> _none 3</span><br><br><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">playGame</span><span class="hljs-params">(<span class="hljs-keyword">int</span> C)</span><span class="hljs-comment">//这里的C是菜单界面的传参</span></span><br><span class="hljs-function"></span>&#123;<br>	<span class="hljs-keyword">char</span> BUFFER[DEFAULT_BUFFER];<br>	<span class="hljs-keyword">if</span> (C == _create)<br>	&#123;<br>		BUFFER[<span class="hljs-number">0</span>] = _create;<br>		BUFFER[<span class="hljs-number">1</span>] = <span class="hljs-number">0</span>;<br>		_SendMessage(Sock_Play, BUFFER);<span class="hljs-comment">//发送创房请求</span><br>		_RecvMessage(Sock_Play, BUFFER);<span class="hljs-comment">//接收房间号(1-100),创建失败接收到101</span><br>		<span class="hljs-keyword">if</span> (BUFFER[<span class="hljs-number">0</span>] == <span class="hljs-number">101</span>)<br>			<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>		<span class="hljs-keyword">if</span>(_Loading(BUFFER[<span class="hljs-number">0</span>]))<br>			<span class="hljs-built_in">CreateRoom</span>();<br>	&#125;<br>	<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (C == _enter)<br>	&#123;<br>		BUFFER[<span class="hljs-number">0</span>] = _enter;<br>		BUFFER[<span class="hljs-number">1</span>] = <span class="hljs-number">0</span>;<br>		_SendMessage(Sock_Play, BUFFER);<span class="hljs-comment">//发送加入房间请求请求</span><br>		<span class="hljs-built_in">Sleep</span>(<span class="hljs-number">100</span>);<br>		<span class="hljs-built_in">GetRoomlist</span>();<br>		<span class="hljs-built_in">ChoiceRoom</span>();<br>	&#125;<br>	<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>上述代码中还有我常用到101，因为已经记住了，所以就没有宏定义了。</p>
<h3 id="连接状态的检测与服务器保护机制"><a href="#连接状态的检测与服务器保护机制" class="headerlink" title="连接状态的检测与服务器保护机制"></a>连接状态的检测与服务器保护机制</h3><p>这里其实我在前面已经说过了，这里主要是针对服务器端的。因为客户端嘛，是人为控制的，见情况不对还能直接一键关闭，甚至 有时候来一些骚操作，不按照用户手册和正规操作方法来使用软件，客户端重启就能解决了问题，但是服务器端却不能随随便便重启，所以要优化代码以及对服务器端进行保护，在正常的操作情况下退出（菜单界面鼠标点击关闭），服务器端是可以接收到关闭信息的，然后服务器会关闭该线程以释放空间。</p>
<p>但是如果，有的用户玩着玩着突然就点 × 把软件关闭，如果服务器不能检测，那么线程就会一直存在并且越来越多，最后导致服务器崩溃。这里的解决办法也很简单，关键在于 <code>recv</code> 函数。</p>
<p><code>recv</code>函数和<code>send</code>函数有一个最大的区别，一个是阻塞函数，一个是非阻塞函数。在我的服务器端和客户端，我都将这两个函数进行了打包，根据其返回信息做了处理，主要在于服务器端的<code>recv</code>函数，它是这样的</p>
<figure class="highlight c++"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs c++"><span class="hljs-keyword">int</span> _RecvMessage(SOCKET sock, <span class="hljs-keyword">char</span>* Buffer)<br>&#123;<br>	<span class="hljs-keyword">int</span> ret;<br>	ret = <span class="hljs-built_in">recv</span>(sock, Buffer, DEFAULT_BUFFER, <span class="hljs-number">0</span>);<br>	<span class="hljs-keyword">if</span> (ret == <span class="hljs-number">0</span>)<br>		<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>	<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (ret == SOCKET_ERROR) &#123;<br>		<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>	&#125;<br>	Buffer[ret] = <span class="hljs-string">&#x27;\0&#x27;</span>;<br>	<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>而我通常是这么用它的：</p>
<figure class="highlight c++"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs c++"><span class="hljs-keyword">if</span> (!_RecvMessage(Sock, buffer))<br>&#123;<br>	<span class="hljs-comment">/* …… */</span><br>    <span class="hljs-keyword">return</span>;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>原理如下：<code>recv</code>为阻塞函数，当执行到该函数时，程序会进入等待状态，此时整个程序是阻塞态，不会继续运行，你可以理解为<code>scanf</code>，同时该函数还可以用于检测通信线程是否正常连接，如果断开了，则会返回一个 <code>SOCKET_ERROR</code>，所以根据这个值就可以判断客服端是否在线了，此时，就省略了“保活”这一操作。</p>
<p>我在每次接收时都是这样使用（服务器端），直接是断开连接了，就会得到<code>SOCKET_ERROR</code>，然后就不管进程到哪一步了直接一路return到最开始的线程函数</p>
<figure class="highlight c++"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs C++"><span class="hljs-keyword">while</span> (_RecvMessage(sock, Buffer))<span class="hljs-comment">//主菜单界面接收客户端请求</span><br>&#123;<br>    CorI = Buffer[<span class="hljs-number">0</span>];<br>    <span class="hljs-built_in">CreateOrInter</span>(sock,CorI,user.name);<span class="hljs-comment">//加入房间还是创建房间</span><br>&#125;<br><span class="hljs-built_in">printf</span>(<span class="hljs-string">&quot;玩家%s已断开连接\n&quot;</span>, user.name);<br><span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br></code></pre></div></td></tr></table></figure>

<p>最后return 0，线程结束后关闭。</p>
<p>该方法经过我各种暴力测试运行结果良好基本没有问题。</p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E9%9A%8F%E6%89%8B%E8%AE%B0%C2%B7%E4%B8%80%E4%BA%9B%E5%AE%89%E5%85%A8%E4%B9%8B%E5%A4%96%E7%9A%84%E6%8A%80%E6%9C%AF/">随手记·一些安全之外的技术</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/Win32/">Win32</a>
                    
                      <a class="hover-with-bg" href="/tags/EasyX/">EasyX</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/archives/Pwn%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Pwn环境搭建</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/archives/Excel%E5%85%AC%E5%BC%8F%E8%AE%A1%E7%AE%97%E5%90%8E%E5%8F%AA%E4%BF%9D%E7%95%99%E7%BB%93%E6%9E%9C.html">
                        <span class="hidden-mobile">Excel公式计算后只保留结果</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments" lazyload>
                
                  
                
                
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"5INqyf5xMrWdsn0whn39qjsu-gzGzoHsz","appKey":"6UTAOxyJnjvDwHX3PJagKMg9","path":"window.location.pathname","placeholder":"输入QQ号我就能获取你的企鹅昵称和头像啦~","avatar":"retro","meta":["nick","mail","link"],"requiredFields":[],"pageSize":10,"lang":"zh-CN","highlight":false,"recordIP":false,"serverURLs":"","emojiCDN":null,"emojiMaps":null,"enableQQ":true,"tagMeta":["博主","小伙伴","访客"],"master":"3bbfd45c0631973d5196327805f62511","friends":["2012b2da9e0852350b42a9c21823f3cf","641f794b535aea2ebe2ad543ec35e2f8"]},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          Fluid.plugins.initFancyBox('#valine .vcontent img:not(.vemoji)');
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
      <div class="col-lg-7 mx-auto nopadding-x-md">
        <div class="container custom mx-auto">
          <meting-js server="netease" type="playlist" id="5413938648" fixed="true" theme="#aa55ff"></meting-js>
        </div>
      </div>
    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>使用Hexo框架</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>精品Fluid主题</span></a><br> <span id="timeDate">天数载入中</span><span id="times">...</span><br> 
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- LeanCloud 统计PV -->
        <span id="leancloud-site-pv-container" style="display: none">
            总访问量 
            <span id="leancloud-site-pv"></span>
             次
          </span>
      
      
        <!-- LeanCloud 统计UV -->
        <span id="leancloud-site-uv-container" style="display: none">
            总访客数 
            <span id="leancloud-site-uv"></span>
             人
          </span>
      

    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        蜀ICP备2021029058号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51011202000479"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/img/beian.png" srcset="/img/loading.gif" lazyload alt="police-icon"/>
            
            <span>川公网安备 51011202000479号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  




  <script defer src="/js/leancloud.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>




  

  

  

  

  

  




  
<script src="//cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<script src="/xm_custom/custom.js"></script>



<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
